<template>
  <div class="userMain">
    <div class="userLeft">
        <el-table :data="tableData" border style="width: 100%;height: 100%;">
        <el-table-column  type="index" label="" min-width="20">
        </el-table-column>
        <el-table-colum prop="userName" label="用户名">
        </el-table-colum>
        <el-table-column prop="userPassword" label="密码" >
        </el-table-column>
        <el-table-column prop="PCID" label="分控设备ID">
        </el-table-column>
        <el-table-column prop="MOID" label="手机设备ID">
        </el-table-column>
      </el-table>
    </div>
    <div class="userRight">
      <button
        v-for="(item, index) in userButtons"
        :key="index"
        @click="changeAny(item,index)"
        :class="{ isSetted: currentSoundIndex === index }"
      >
        <div class="buttonName">{{ item }}</div>
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const tableData=ref([
  {
    userName:"11",
    userPassword:"设备名称",
    PCID:"type",
    MOID:"55",
    
  },
])
const currentSoundIndex=ref(0)
const userButtons=ref(['新 建 用 户','修 改 用 户','删 除 用 户'])
const changeAny=(item,index)=>{
    currentSoundIndex.value=index
}
</script>
<style scoped>
@import url("./user_management.less");
</style>